<template>
  <div class="app-layout">
    <app-left />
    <div class="app-body">
      <app-header />
      <app-content />
      <!-- <app-footer /> -->
    </div>
  </div>
</template>

<script>
import AppHeader from './header';
import AppLeft from './left';
import AppContent from './content';
import AppFooter from './footer';
export default {
  components: { AppLeft, AppHeader, AppContent, AppFooter },
  data() {
    return {};
  },
  computed: {
    isCollapse() {
      return this.$store.state.ui.navCollapsed;
    }
  }
};
</script>

<style lang="scss" scoped>
.app-layout {
  display: flex;
  flex-direction: row;

  .app-left {
    z-index: 100;
  }

  .app-body {
    flex: 1;
    position: relative;
    overflow-x: hidden;
    background: #f3f4f7;
  }

  .app-content {
    -ms-overflow-style: none;
  }

  .app-content::-webkit-scrollbar {
    display: none;
  }
}
</style>
